import Input from '@/components/Input';
import NavBar from '@/components/NavBar';
import styles from './index.module.scss';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { useDispatch } from 'react-redux';
import { loginAction, sendCodeAction } from '@/store/action/login';
import { useEffect, useRef, useState } from 'react';
import { Toast } from 'antd-mobile';
import { useHistory, useLocation } from 'react-router-dom';
import { AuthLocationStateType } from '@/components/AuthRoute';

export default function Login(props: any) {
  //7.1 获取history对象
  const history = useHistory();
  const location = useLocation<AuthLocationStateType>();
  const dispatch = useDispatch();
  const [second, setSecond] = useState(0);
  //创建ref 保存timerId
  const timerIdref = useRef(-1);

  // 在组件卸载时,清除定时器
  useEffect(() => {
    return () => {
      clearInterval(timerIdref.current);
    };
  }, []);

  const formik = useFormik({
    initialValues: {
      mobile: '15917533639',
      code: '',
    },
    onSubmit: async (values) => {
      console.log(values);
      await dispatch(loginAction(values));
      //跳转路由
      // 19.7.2 改造 跳转路由 如果有 from 就跳转回原来的地方 没有则跳到首页
      const { from = '/' } = location.state || {};
      history.push(from);
      //提示用户登录成功
      Toast.show({ content: '登录成功' });
    },

    // 🔑 validate函数，接收更新的values，返回错误信息组成的对象
    // validate: (values) => {
    //   // 1. 在validate函数中，定义空errors对象
    //   let errors = {} as { mobile: string; code: string };
    //   // 2. 校验手机号是否正确，不正确则给errors添加mobile的错误信息
    //   if (!/^1[3-9]\d{9}$/.test(values.mobile)) {
    //     errors.mobile = '手机号格式错误';
    //   }
    //   // 校验验证码
    //   if (!/^\d{6}$/.test(values.code)) {
    //     // 3. 校验验证码是否正确，不正确则给errors添加code的错误信息
    //     errors.code = '验证码格式错误';
    //   }
    //   // 4. 返回errors独享
    //   return errors;
    // },

    validationSchema: Yup.object().shape({
      //写上校验规则的键值对
      mobile: Yup.string()
        .required('手机号码不能为空')
        .matches(/^1[3-9]\d{9}$/, '手机号格式错误'),
      code: Yup.string()
        .required('验证码不能为空')
        .matches(/^\d{6}$/, '验证码格式错误'),
    }),
  });

  const handleSendCode = () => {
    dispatch(sendCodeAction(formik.values.mobile));
    //初始60秒
    setSecond(60);
    //开启定时器
    timerIdref.current = window.setInterval(() => {
      // setState是异步的 使用setState((preState)=>newState) 的第二种方法
      setSecond((preSecond) => {
        if (preSecond === 1) {
          clearInterval(timerIdref.current);
        }
        return preSecond - 1;
      });
    }, 100);
  };

  return (
    <div className={styles.root}>
      <NavBar>登录</NavBar>
      <div className="content">
        {/* 标题 */}
        <h3>短信登录</h3>
        <form onSubmit={formik.handleSubmit}>
          {/* 手机号输入框 */}
          <Input
            autoFocus
            placeholder="请输入手机号"
            autoComplete="off"
            type="text"
            name="mobile"
            maxLength={11}
            // 🔑 将form.errors存储的错误信息，传给errorMsg
            value={formik.values.mobile}
            onChange={formik.handleChange}
            // 1.绑定onBlur事件 =formik.handleBlur
            onBlur={formik.handleBlur}
            // 2.判断条件：如果摸过，则显示校验信息，如果没摸过，则不显示校验信息
            errorMsg={formik.touched.mobile ? formik.errors.mobile : ''}
          />

          {/* 短信验证码输入框 */}
          <Input
            placeholder="请输入验证码"
            autoComplete="off"
            type="text"
            name="code"
            maxLength={6}
            extra={
              second === 0 ? (
                <span onClick={handleSendCode}>发送验证码</span>
              ) : (
                <span>{second}发送验证码</span>
              )
            }
            // 🔑 将form.errors存储的错误信息，传给errorMsg
            value={formik.values.code}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            errorMsg={formik.touched.code ? formik.errors.code : ''}
          />

          {/* 登录按钮 */}
          <button
            type="submit"
            className="login-btn"
            disabled={!formik.isValid}
          >
            登录
          </button>
        </form>
        {JSON.stringify(formik.touched)}
      </div>
    </div>
  );
}
